<template>
  <div class="user-center h-100p">
    <div>
      <el-menu
        router
        :default-active="activeRouter"
        :collapse="isCollapse">
        <template v-for="item in menus">
          <el-menu-item :index="item.url" :key="item.url">
            <i :class="['iconfont',item.icon]"></i>
            <span slot="title">{{item.name}}</span>
          </el-menu-item>
        </template>
      </el-menu>
    </div>
    <router-view class="fx-1 h-100p" :userInfo="userInfo" @refresh="getUserDetail"></router-view>
  </div>
</template>

<script lang="ts">
  import { Vue, Component } from 'vue-property-decorator'

  @Component
  export default class UserCenter extends Vue {
    userInfo = {}
    userAccount = {}
    isCollapse: boolean = false
    menus = [
      {
        name: '基本资料',
        url: '/user-center/base'
      },
      {
        name: '安全设置',
        url: '/user-center/safe'
      },
      {
        name: '实名认证',
        url: this.userInfo.certificationStatus >= 4?'/user-center/auth':'/user-center/auth'
      },
      {
        name: '对公账户',
        url: '/user-center/account'
      }
    ]

    get activeRouter (): string {
      return this.$route.meta.activeRouter
    }

    async getUserDetail () {
      let id = JSON.parse(window.sessionStorage.getItem('userInfo')).userId
      let res: AjaxResponse = await this.$axios.get(`g/gateway/member/${id}`)

      this.userInfo = res.data
      // console.log(this.userInfo)
      window.sessionStorage.setItem('certicaDetail', JSON.stringify(res.data))
      let resAccount: AjaxResponse = await this.$axios.get(`g/gateway/account/user/${this.userInfo.enterpriseUserId}`)
      this.userAccount = resAccount.data[0]
      window.sessionStorage.setItem('certicaAccountDetail', JSON.stringify(resAccount.data[0]))
    }

    mounted () {
      this.getUserDetail()
    }
  }
</script>

<style lang="less" scoped>
  .el-menu {
    border: none;
    border-radius: 10px;
    width: 200px;
    margin-right: 10px;
  }

  .user-center {
    display: flex;
  }

  .iconfont {
    margin-right: 10px;
    font-size: 20px;
  }

</style>
